<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>post按钮</button>
    <p></p>
    <script>
        let btns = document.querySelectorAll('button');
        let p = document.querySelector('p');

        btns[0].onclick = function() {
            ajax.get('http://localhost/getHeros', (data) => {
                // console.log(data);
                p.innerHTML = data;
            })
        }

        btns[1].onclick = function() {
            ajax.get('http://localhost/getServer', (data) => {
                alert(data);
            }, {
                id: 123,
                name: '老高'
            })
        }

        btns[2].onclick = function() {
            ajax.post('http://localhost/postServer', (data) => {
                console.log(data);
            }, {
                username: "小李",
                pwd: 666
            })
        }

        let ajax = {
            get: function(url, cb, data) {
                let x = new XMLHttpRequest();
                let str = Object.keys(data).map(item => `${item}=${data[item]}`).join('&');
                console.log(str);
                // let str = '';
                // // console.log(data);
                // // console.log(Object.keys(data));
                // // 将对象变成字符串
                // Object.keys(data).forEach(item => {
                //     str += `${item}=${data[item]}&`;
                // });
                // // 截取
                // str = str.slice(0, -1)
                // console.log(str);

                x.open('get', url + '?' + str)
                x.send();
                x.onreadystatechange = function() {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            cb(x.response)
                        }
                    }
                }
            },
            post: function(url, cb, data) {
                let x = new XMLHttpRequest();
                let str = Object.keys(data).map(item => `${item}=${data[item]}`).join('&');
                x.open('post', url);
                x.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                x.send(str);
                x.onreadystatechange = function() {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            cb(x.response)
                        }
                    }
                }
            }
        }

        // function ajax(url, data, cb) {

        //     let x = new XMLHttpRequest();

        //     if (type.toLowerCase() === 'get') {
        //         x.open(type, url + '?' + data)
        //         x.send();
        //     } else {
        //         x.open(type, url);
        //         x.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        //         x.send(data);
        //     }

        //     // x.responseType ='json';

        //     x.onreadystatechange = function() {
        //         if (x.readyState === 4) {
        //             if (x.status >= 200 && x.status < 300) {
        //                 // p.innerHTML = x.response;
        //                 // alert()
        //                 cb(x.response)
        //             } else {

        //             }
        //         }
        //     }
        // }


        // function ajax(url,type,data,callback){

        // }

        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */
        // 1. 声明ajax函数，声明三个形参
        // 2. 声明xhr对象
        // 3. 打开请求
        // 4. 设置请求头（可选）
        // 5. 将参数2数据解析成 表单格式数据 key=val&key=val
        // 6. 发送请求
        // 7. 设置响应数据类型
        // 8. 监听xhr对象就绪状态
        // 9. 判断状态码
        // 10. 执行回调（传入响应数据）
    </script>
</body>

</html>